<template>
    <div class="wrap">
        <div>
            <span>患者姓名</span><span class="star">*</span>
            <a-input v-model:value="value1" placeholder="患者姓名/手机号码/证件号码/卡号" 
            class="positions"/>
        </div>
        <div>
            <p>患者卡号</p>
            <a-input v-model:value="value2"  />
        </div>
        <div>
            <span>患者年龄</span><span class="star">*</span>
            <a-input v-model:value="value3"  class="positions"/> 
        </div>
            <a-form-item  v-bind="config" >
                <span>出生日期</span><span class="star">*</span>
                <a-date-picker  value-format="YYYY-MM-DD" />
            </a-form-item>
        <div>
            <span>性别</span><span class="star">*</span>
            <a-form-item name="area"  :rules="[{ required: false, message: '请输入性别' }]">
                <a-select v-model:value="dynamicValidateForm.area" :options="areas" />
            </a-form-item>
        </div>
        <div>
            <p>手机号码</p>
            <a-input v-model:value="value4"  />
        </div>
        <div>
            <p>证件号码</p>
            <a-input v-model:value="value5"  />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive,onMounted } from 'vue'
// import Bus from "../../../utils/Bus"
interface UserType {
  name?: string;
  age?: number;
  key?: number;
}
interface FormState {
  group: string;
  users: UserType[];
}

interface Sights {
  value: string;
  price: string;
  id: number;
}

export default defineComponent({
    setup () {
        const value1 = ref<string>('');
        const value2 = ref<string>('');
        const value3 = ref<string>('');
        const value4 = ref<string>('');
        const value5 = ref<string>('');
        const formState = reactive<FormState>({
            group: '',
            users: [],
       });
       
       const config = {
            rules: [{ type: 'string' as const, required: true, message: '' }],
        };
        const dynamicValidateForm = reactive<{ sights: Sights[]; area: string }>({
            sights: [],
            area: "",
        });
        const areas = [
            { label: '男', value: '男' },
            { label: '女', value: '女' },
        ];
        return {
            value1,
            value2,
            value3,
            value4,
            value5,
            config,
            formState,
            dynamicValidateForm,
            areas
        }
    }
})
</script>

<style scoped lang="less">
    .ant-input,.ant-form-item-control-input{
        width:15.625rem ;
    }
    .wrap{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        div{
            margin:1.25rem 4.375rem 0rem 0rem;
            width: 15.6875rem;
        }
    }
    #fourdiv{
        margin-right: .625rem;
    }
    /deep/.ant-picker{
        width:15.375rem;
        margin-top: 0rem;
        margin-right: 0rem;
        display: block;
        position: relative;
        top: -0.375rem;
    }
    .ant-form-item-control-input-content{
        margin-right: 0rem;
    }
    /deep/.ant-select-selector{
    width: 14.9375rem;
    height: 1.375rem;
    position: relative;
    top:-1.5625rem;
  }
  /deep/.ant-select-arrow{
    position: relative;
    top:-3.3125rem;
    left: 14.4375rem;
  }
  .star{
    color:red
  }
  .positions{
    position: relative;
    top: 14px;
  }
</style>